<template>
    <div>
        <h1>App</h1>
        <input type="text" v-model="info.name">{{ info.name }}
        <hr>
        <input type="text" v-model="newInfo.name.value">{{ newInfo.name.value }}
    </div>
</template>
<script setup>
/*

toRef
1. 将响应数据转成ref响应式数据
2. 转换后的数据和源数据保持同步
toRefs
1. 将响应对象数据转成普通对象，对象中的每一个属性转换成ref数据
2. 转换后的属性数据和源数据保持同步
*/
import { ref, shallowRef, reactive, shallowReactive, toRef, toRefs } from 'vue';

const info = reactive({ name: 'jack', age: 20 });
const newInfo = toRefs(info);
// const newInfo = { name: ref('jack'), age: ref(20) }
console.log(newInfo.name.value);
console.log(newInfo.age.value);



</script>

<style>
div {
    border: solid;
    padding: 10px;
}
</style>